<!-- <LINK rel=stylesheet type=text/css href="pages/content/customerPortfolio/customerView/customerView.css" /> -->
<div class="customerView">
    <link rel=stylesheet type=text/css href="pages/content/customerPortfolio/customerView/customerView.css" />
    <div class="flexWrap">
        <div class="flexBlock">
            <div class="title">Base Information</div>
            <div class="titleUnderline"></div>
        </div>
        <div class="flexBlock">
            <div class="rightBox">
                <yu-select v-model="brand" value-key="id" placeholder="请选择" @change="selecbrandFn" class="selectbrand">
                    <yu-option v-for="item in optionsB" :key="item.id" :label="item.name" :value="item">
                    </yu-option>
                </yu-select>
                <a href="#" class="downloadPDF">
                    <img src="../../../../libs/customer/downloadicon.png"><span>PDF</span>
                </a>
            </div>
        </div>
    </div>
    <div class="infoBlock">
        <div class="componyInfo">
            <ul>
                <li>
                    <span class="infoA">Customer Name：</span>
                    <span class="infoQ">ABC Holding Limited</span>
                </li>
                <li><span class="infoA">Customer Name in Chinese：</span>
                    <span class="infoQ">ABC控股有限公司</span></li>
            </ul>
        </div>
        <div class="componyInfo">
            <ul>
                <li><span class="infoA">RM Name：</span>
                    <span class="infoQ">Susie Potter</span></li>
                <li><span class="infoA">RM Code：</span>
                    <span class="infoQ">C9001</span></li>
            </ul>
        </div>
    </div>
    <yu-menu :default-active="activeIndex" class="el-menu-demo viewUl" mode="horizontal" @select="handleSelect">
        <yu-menu-item index="0">Loan Balance</yu-menu-item>
        <yu-menu-item index="1">Deposit Balance</yu-menu-item>
        <yu-menu-item index="2">Profitability</yu-menu-item>
        <yu-menu-item index="3">Facility Information</yu-menu-item>
        <yu-menu-item index="4">Investment Information</yu-menu-item>
    </yu-menu>
    <div v-if="activeIndex=='0'">
        000000000
    </div>
    <div v-if="activeIndex=='1'">
        111111111111
    </div>
    <!-- Profitability 图表 -->
    <div v-if="activeIndex=='2'">
        -----------
        <div class="barEchartBlock">
            <div id="barEchart" style="width: 100%;height: 316px;"></div>

        </div>
    </div>
    <div v-if="activeIndex=='3 '">
        33333333333333
    </div>
    <div class="tableBlock" v-if="activeIndex=='4 '">
        <yu-table :data="tableData6" show-summary style="width:100%;overflow-x: scroll;">
            <yu-table-column prop="id" label="ID" width="200">
            </yu-table-column>
            <yu-table-column prop="name" label="Customer Name" width="200">
            </yu-table-column>
            <yu-table-column prop="amount1" sortable label="Investment Type" width="200">
            </yu-table-column>
            <yu-table-column prop="amount2" sortable label="Position/Description" width="200">
            </yu-table-column>
            <yu-table-column prop="amount3" sortable label="Quantity" width="200">
            </yu-table-column>
            <yu-table-column prop="amount1" sortable label="Currency" width="200">
            </yu-table-column>
            <yu-table-column prop="amount3" sortable label="Quantity" width="200">
            </yu-table-column>
            <yu-table-column prop="amount1" sortable label="Cost Price" width="200">
            </yu-table-column>
            <yu-table-column prop="amount3" sortable label="Latest Price" width="200">
            </yu-table-column>
            <yu-table-column prop="amount1" sortable label="Accrual Interest" width="200">
            </yu-table-column>
        </yu-table>
    </div>



</div>
<style>
    .barEchartBlock {
        width: 540px;
        height: 316px;
        border: 1px solid #EEEEEE;
        border-radius: 8px;
        border-radius: 8px;
    }
    
    .customerView {
        background: #fff;
        padding: 15px;
        border-radius: 8px;
    }
    
    .flexWrap {
        width: 100%;
        display: flex;
    }
    
    .flexBlock {
        flex: 1;
        align-items: center;
        justify-content: space-between;
    }
    
    .rightBox {
        /* text-align: right; */
        display: flex;
        flex-direction: row-reverse;
    }
    
    .title {
        font-size: 16px;
        color: #000000;
        margin-bottom: 10px;
    }
    
    .titleUnderline {
        width: 32px;
        height: 4px;
        background-image: linear-gradient(268deg, #F0506E 0%, #E7324B 64%, #D7000F 100%);
        box-shadow: 0 2px 5px 0 rgba(215, 0, 15, 0.50);
        border-radius: 4px;
        margin-bottom: 24px;
    }
    
    .downloadPDF {
        margin-top: 2px;
        margin-right: 26px;
        line-height: 21px;
    }
    
    .downloadPDF img {
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-right: 2px;
    }
    
    .downloadPDF span {
        font-size: 14px;
        color: #333333;
    }
    
    .selectbrand {
        width: 100px;
        height: 24px;
    }
    
    .selectbrand .el-input__inner {
        width: 100px;
        height: 24px;
    }
    
    .selectbrand.el-input__prefix,
    .el-input__suffix {
        top: 4px;
    }
    
    .selectbrand.el-select-dropdown__item.selected,
    .el-select-dropdown__item.selected.hover {
        background: none;
        font-size: 14px;
        color: #D7000F;
    }
    
    .selectbrand.el-select-dropdown__item.selected,
    .el-select-dropdown__item.selected {
        background: none;
        font-size: 14px;
        color: #D7000F;
    }
    
    .infoBlock {
        width: 100%;
        display: flex;
        flex-direction: row;
        margin-bottom: 24px;
    }
    
    .componyInfo {
        flex: 1;
        height: 84px;
        border: 1px solid #EEEEEE;
        border-radius: 8px;
        display: flex;
        align-items: center;
        font-size: 14px;
    }
    
    .componyInfo:nth-child(2) {
        margin-left: 24px;
    }
    
    .infoA {
        display: inline-block;
        width: 200px;
        text-align: right;
        color: #666666;
    }
    
    .infoQ {
        text-align: left;
        color: #333333;
    }
    
    .customerView .viewUl {
        font-size: 14px;
        color: #666666;
        border-bottom: 1px solid #EEEEEE;
    }
    
    .customerView .viewUl .el-menu-item :hover {
        border-bottom: 1px solid black;
        font-size: 14px;
        color: #000000;
    }
    
    .customerView .viewUl .el-menu-item.is-active {
        background: none;
        border-bottom: 1px solid #D7000F;
        font-size: 14px;
        color: #000000;
    }
    
    .customerView .viewUl .el-menu-item:hover {
        border-bottom: 1px solid #D7000F;
    }
    
    .customerView .viewUl.el-menu--horizontal .el-menu-item {
        /* border-bottom: none; */
        /*  background: none;
        color: #666666;*/
    }
    
    .customerView .viewUl.el-submenu .el-menu-item:hover {
        border-bottom: 1px solid #D7000F;
        color: #000;
    }
</style>